<template>
  <div class="x6-graph-wrap">
    <div ref="container" class="x6-graph" />
  </div>
</template>

<script lang="ts">
import '../index.less'
import { Graph } from '@antv/x6'
import {defineComponent} from "vue";

export default defineComponent({
  name: "index",
  mounted() {
    const graph = new Graph({
      container: (this.$refs.container) as HTMLElement,
      width: 800,
      height: 600,
      grid: true,
      snapline: true,
    })

    graph.addNode({
      shape: 'rect',
      x: 50,
      y: 50,
      width: 100,
      height: 40,
      attrs: { label: { text: 'A' } },
    })

    graph.addNode({
      shape: 'circle',
      x: 250,
      y: 80,
      width: 50,
      height: 50,
      attrs: { label: { text: 'B' } },
    })

    graph.addNode({
      shape: 'ellipse',
      x: 350,
      y: 150,
      width: 80,
      height: 40,
      attrs: { label: { text: 'C' } },
    })
  }
})
</script>

<style scoped>

</style>
